<!-- 组件说明 -->
<template>
  <div class="third-node" :class="riskColor(thirdData)">
    <div class="title">
      <el-tooltip content="关键路径标识">
        <div v-if="thirdData.valueMap.IS_CRITICAL_PATH == true" class="biaoshi">
          <img src="@/assets/isCruxB.png" style="width: 12px; height: 12px" />
        </div>
      </el-tooltip>
      <el-icon><CaretRight /></el-icon>
      <el-tooltip
        class="box-item"
        effect="dark"
        :content="thirdData.textMap.NAME"
        placement="top-start"
      >
        {{ thirdData.textMap.NAME }}
      </el-tooltip>
    </div>
    <div class="detail">
      <div>
        <span class="detail-title">{{ planTime }} : </span>

        <span>{{ thirdData.textMap.PLAN_TO }}</span>
      </div>
      <div>
        <span class="detail-title">{{ actualTime }} : </span
        ><span>{{ thirdData.textMap.ACT_TO }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed, ref, watch } from 'vue'
import { riskColor } from './index'

import { usePltI18nStore } from '@/stores/i18n-plt'
const pltI18nStore = usePltI18nStore()

const { planTime, actualTime } = pltI18nStore.pltI18n.cisdi.gczx.frontEnd.topo

const props = defineProps({
  thirdData: {
    type: Object,
    default: '',
  },
})

onMounted(() => {})
</script>

<style lang="scss" src="">
$single-width: 194px;
$primary-node-height: 60px;
$todo-color: #606266; //rgb(96, 98, 102),#ebebeb
$done-color: #2daa98; //#2daa98,#63b47e
$doing-color: #ff9500; //#ff9500,#eec871
$over-color: #ff4949; //#ff4949,#e60012
.third-node {
  position: relative;
  border: 1px solid $done-color;
  width: $single-width;
  border-radius: 4px;
  margin: 20px 0;
  &.doing {
    border: 1px solid $doing-color;
    .title {
      background-color: $doing-color;
    }
  }
  &.over {
    border: 1px solid $over-color;
    .title {
      background-color: $over-color;
    }
  }
  &.todo {
    border: 1px solid $todo-color;
    .title {
      background-color: $todo-color;
    }
  }
  .title {
    background-color: $done-color;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  .detail {
    padding: 10px 20px;
    font-size: 12px;
    line-height: 24px;
    .detail-title {
      font-weight: bold;
      margin-right: 10px;
    }
  }
}
.biaoshi {
  position: absolute;
  right: 10px;
}
</style>
